Sexy Tooltipsの使い方

下記ページの｢Download the Sexy Tootips Source Files｣の「css-tooltips」よりファイル1式をダウンロード。
Sexy Tooltips
ダウンロードしたファイルを任意の場所にコピー。

動作させるファイル（サンプルではindex.html）にコードを記述。
＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
・head部分にcssファイルを読み込ませるためのコードを記述。

<head>
<!--css部分を外部化したファイル-->
<link rel="stylesheet" type="text/css" href="css/Sexy Tooltips.css" />
</head>

サンプルのcssコード（サンプルのcssは改変しています）

/*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	font: 75% Verdana, Arial;
	color: #333;
	background: #fff
}
#container {
	width: 400px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからSexy Tooltipsの設定*/
.tooltip {
	border-bottom: 1px dotted #000000;
	color: #000000;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	position: absolute;
	left: 1em;
	top: 2em;
	z-index: 99;
	margin-left: 0;
	width: 250px;
}
.tooltip:hover img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif;
	font-size: 1em;
	font-weight: bold;
	display: block;
	padding: 0.2em 0 0.6em 0;
}
.classic {
	padding: 0.8em 1em;
}
.custom {
	padding: 0.5em 0.8em 0.8em 2em;
}
* html a:hover {
	background: transparent;
}
.classic {
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}
.critical {
	background: #FFCCAA;
	border: 1px solid #FF3334;
}
.help {
	background: #9FDAEE;
	border: 1px solid #2BB0D7;
}
.info {
	background: #9FDAEE;
	border: 1px solid #2BB0D7;
}
.warning {
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}

・<body></body>内にコードを記述

 <a class="tooltip" href="#">Classic<span class="classic">既定表示</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Critical<span class="custom critical"><img src="images/Critical.png" alt="Error" height="48" width="48" /><em>バツ表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Help<span class="custom help"><img src="images/Help.png" alt="Help" height="48" width="48" /><em>クエスチョンマーク表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Information<span class="custom info"><img src="images/Info.png" alt="Information" height="48" width="48" /><em>情報表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Warning<span class="custom warning"><img src="images/Warning.png" alt="Warning" height="48" width="48" /><em>警告表示</em>テキストテキストテキスト</span></a>

サンプルのhtmlコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Sexy Tooltips</title>
<link rel="stylesheet" type="text/css" href="css/Sexy Tooltips.css" />
</head>

<body>
<div id="container"> <a class="tooltip" href="#">Classic<span class="classic">既定表示</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Critical<span class="custom critical"><img src="images/Critical.png" alt="Error" height="48" width="48" /><em>バツ表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Help<span class="custom help"><img src="images/Help.png" alt="Help" height="48" width="48" /><em>クエスチョンマーク表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Information<span class="custom info"><img src="images/Info.png" alt="Information" height="48" width="48" /><em>情報表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Warning<span class="custom warning"><img src="images/Warning.png" alt="Warning" height="48" width="48" /><em>警告表示</em>テキストテキストテキスト</span></a> </div>

</body>
</html>

ファイル1式をサーバーにアップロードして設置完了。